Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.tree.*'
    ]);

Ext.define('Example', {
    extend: 'Ext.data.Model',
    fields: [
    {
        name: 'example',     
        type: 'string'
//    },
//    {
//        name: 'size', 
//        type: 'string'
    }
    ]
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Example',
    proxy: {
        type: 'ajax',
        //the store will get the content from the .json file
        url: 'app/view/treegrid.json'
    },
    folderSort: true
});

var tree = Ext.create('Ext.tree.Panel', {
   title: 'Data Examples',
        id: 'exm',
        cls: 'corn',
        height: 468,
        width: 279,
        autoScroll: true,
        border: false,
        listeners: {
            'afterrender': function(cmp){
                var body = Ext.get(cmp.getEl().dom.childNodes[1].id);
                body.applyStyles('border:none');
                var header_text = Ext.get(cmp.getEl().dom.childNodes[0].id + '_hd-textEl');
                header_text.applyStyles("color:GoldenRod;font-size:16px;font-weight:normal;font-family:arial;border-color:red");
            }
        },
    collapsible: false,
    useArrows: true,
    rootVisible: false,
    store: store,
    multiSelect: false,
    hideHeaders: true,
    bodyBorder : false,
    lines : false,
    //the 'columns' property is now 'headers'
    columns: [{
        xtype: 'treecolumn', //this is so we know which column will show the tree
        flex: 2,
        sortable: true,
        dataIndex: 'example'
//    },{
//        //we must use the templateheader component so we can use a custom tpl
//        xtype: 'templatecolumn',
//        flex: 1,
//        sortable: true,
//        dataIndex: 'size',
//        align: 'center',
//        //add in the custom tpl for the rows
//        tpl: Ext.create('Ext.XTemplate', '{size:this.formatHours}', {
//            formatHours: function(v) {
//                if (v < 1) {
//                    return Math.round(v * 60) + ' mins';
//                } else if (Math.floor(v) !== v) {
//                    var min = v - Math.floor(v);
//                    return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
//                } else {
//                    return v + ' hour' + (v === 1 ? '' : 's');
//                }
//            }
//        })
    }]
});

Ext.define('WebMeV.view.Examples',{
    extend: 'Ext.container.Container',
    alias: 'widget.examples',
    id: 'ex',
    floating: true,
    border: false,
    height: 468,
    width: 279, 
    shadow: false,
    items: [tree]
});

